<template>
  <div>
    <Row >
      <i-col span="24" style="text-align: right">
        <Button type="primary" icon="md-add" class="y_condition" @click="add" v-has=tRole.OTHER_2_101 v-show="isHasRole">新增员工终端</Button>
      </i-col>
    </Row>
    <hr>
    <Row >
      <i-col span="24" style="text-align: right">
        <Input placeholder="员工名称/电脑编号/指纹" v-model.trim="param.searchParams.keyWord" clearable  class="y_condition"></Input>
        <Button type="primary" icon="md-search" class="y_condition" @click="webList">查询</Button>
      </i-col>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border class="base_table"-->
<!--           :columns="tableTitles" :data="employeeTerminalList"-->
<!--           no-data-text="暂无数据"></Table>-->

    <List size="small" border style="margin:0.5rem;text-align: left">
      <div v-if="employeeTerminalList==null || employeeTerminalList.length==0">
        <ListItem>
          <div style="width: 100%; text-align: center;">暂无数据</div>
        </ListItem>
      </div>
      <div v-else>
        <ListItem v-for="(item,index) in employeeTerminalList" class="item_hover">
          <i-col flex="auto">
            <div style="font-weight: bold">
              <KeyValueView >{{'#'+index}}</KeyValueView>
            </div>
            <KeyValueView title="员工名称"  >
            {{item.employeeName}}
            </KeyValueView>
            <KeyValueView title="浏览器指纹"  >
              <Tooltip :content="item.borwerFinger"  transfer>
                {{$tiyHideUsername(item.borwerFinger)}}
              </Tooltip>
            </KeyValueView>
            <KeyValueView title="浏览器"  >
              {{item.borwerName}}
            </KeyValueView>
            <KeyValueView title="浏览器"  >
              {{item.borwerName}}
            </KeyValueView>
            <KeyValueView title="终端编号"  >
              {{item.terminalNo}}
            </KeyValueView>
            <KeyValueView title="终端类型"  >
              <span v-text="item.terminalType==1?'电脑':'手机'"></span>
            </KeyValueView>
            <KeyValueView title="有效期" oneline >
              <div v-if="item.effectiveTime==-1&&item.expireTime==-1">
                长期有效
              </div>
              <div v-else>
                <span v-text="item.effectiveTime==-1?'start:'+$tiyBJTime(item.effectiveTime):'长期'"></span>
                <span v-text="item.expireTime==-1?'end:'+$tiyBJTime(item.expireTime):'长期'"></span>
              </div>
            </KeyValueView>
            <KeyValueView title="创建时间" oneline >
              <span v-text="$tiyBJTime(item.createtime)"></span>
            </KeyValueView>
          </i-col>
          <i-col >
            <div class="item_bottom" style="padding: 0.5rem " >
              <i-button type="primary" size="small"  icon="ios-create" style="marginRight: 10px;marginTop:6px;marginBottom:6px" @click="modify(index)">编辑</i-button>
              <i-button type="error" size="small" icon="md-trash"  style="marginRight: 10px;marginTop:6px;marginBottom:6px" @click="deleteAction(item.id)">删除</i-button>
            </div>
          </i-col>
        </ListItem>
      </div>
    </List>


    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator />
    </div>

    <Modal
      v-model="status.modifyModal.isShow"
      :title="status.modifyModal.title"
      :scrollable="true">

      <Form :model="param.employeeTerminal"  :label-width="120"  :rules="employeeTerminalRules"
            style="margin:2rem 0px 1rem 0px">
        <FormItem label="员工信息 :" >
          <SearchEmployee @chooseEmployee="chooseEmployee" :choosed="choosedEmployee"/>
        </FormItem>
        <FormItem label="终端信息 :" >
          <SearchTerminal @chooseTerminal="chooseTerminal" :choosed="choosedTerminal"/>
        </FormItem>
        <FormItem label="到期时间 :">
          <div >
            <i-switch size="large" v-model="param.employeeTerminal.isLongTerm" @on-change="chooseTimeType">
              <span slot="open">长期</span>
              <span slot="close">时段</span>
            </i-switch>
          </div>
          <DatePicker v-show="!param.employeeTerminal.isLongTerm" type="datetimerange" :options="param.datePickerOption" @on-change="chooseExpireTime" :value="param.employeeTerminal.startEndTime"
                      placement="bottom-end" placeholder="选择到期日期时间" class="form_step" format="yyyy-MM-dd HH:mm"
                      style="width: 80%"></DatePicker>

        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="saveEmployeeTerminal">确定</Button>
      </div>
    </Modal>
    <Modal
      v-model="status.actionModal.isShow"
      :title="status.actionModal.title"
      @on-ok="webDelete">
      <br>
      <p>确定删除电脑标记?</p>
      <br>
    </Modal>
  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  //简单 aes加密
  import SimpleCrypto from "simple-crypto-js";
  import SearchEmployee from "../widgets/SearchEmployee";
  import SearchTerminal from "./SearchTerminal";
  import tiyData from "./js/employeeTerminal/employee_terminal_data";
  import {webList,init,saveEmployeeTerminal,modifyEmployeeTerminal,deleteEmployeeTerminal,webDeleteEmployeeTerminal} from "./js/employeeTerminal/employee_terminal_fun";
  import KeyValueView from "../widgets/KeyValueView";
  export default {
    components: {ICol, SearchEmployee, SearchTerminal,KeyValueView},
    data() {
      return {
      	// postageMethodDict:[],
        tRole:{
          OTHER_2_101: "OTHER-2-101"
        },
        page: tiyData.tPage,
        employeeTerminalList: tiyData.tData.employeeTerminalList,
        status: tiyData.tStatus,
        param: tiyData.tParam,
        isHasRole: true,
        employeeTerminalRules:tiyData.tStatus.employeeTerminalRules,
        tableTitles:tiyData.listTableTitles(this),
        choosedEmployee:{},
        choosedTerminal:{},

      }
    },
    computed: {


    },
    methods: {

      webList(){
        webList(this,tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
     add(){
       tiyData.tParam.employeeTerminal.id = "";
       tiyData.tParam.employeeTerminal.employeeId = "";
       tiyData.tParam.employeeTerminal.terminalId = "";
       tiyData.tParam.employeeTerminal.borwerFinger = "";
       tiyData.tParam.employeeTerminal.borwerName = "Chrome";
       tiyData.tParam.employeeTerminal.terminalNo = "";
       tiyData.tParam.employeeTerminal.terminalType = "";
       tiyData.tParam.employeeTerminal.computeBy = "公司";
       tiyData.tParam.employeeTerminal.employeeName = "";

       tiyData.tParam.employeeTerminal.startEndTime.length = 0;
       let startDate = new Date(new Date());
       let endDate = new Date(new Date(new Date().getTime() + 60 * 60 * 1000));
       tiyData.tParam.employeeTerminal.startEndTime.push(new Date());
       tiyData.tParam.employeeTerminal.startEndTime.push(new Date(new Date().getTime() + 60 * 60 * 1000));
       tiyData.tParam.employeeTerminal.effectiveTime = -1;
       tiyData.tParam.employeeTerminal.expireTime = -1;
       this.choosedEmployee = {id:"", name:""};
       this.choosedTerminal = {id:"", name:""};
       tiyData.tParam.employeeTerminal.isLongTerm = true;
       tiyData.tStatus.modifyModal.isShow=true;
       tiyData.tStatus.modifyModal.title="新增员工终端";
      },
      deleteAction(id){
        deleteEmployeeTerminal(this,tiyData,id);
      },
      webDelete(){
          webDeleteEmployeeTerminal(this,tiyData);
      },
      modify(index){
        modifyEmployeeTerminal(this,tiyData,index);
      },
      saveEmployeeTerminal(){
        saveEmployeeTerminal(this,tiyData);
      },
      chooseTimeType(isLongTerm){
        if(isLongTerm){
          tiyData.tParam.employeeTerminal.effectiveTime = -1;
          tiyData.tParam.employeeTerminal.expireTime = -1;
        }else{
          let startDate = new Date(tiyData.tParam.employeeTerminal.startEndTime[0]);
          let endDate = new Date(tiyData.tParam.employeeTerminal.startEndTime[1]);
          tiyData.tParam.employeeTerminal.effectiveTime = Date.UTC(startDate.getFullYear(),startDate.getMonth(),startDate.getDate(),startDate.getHours());
          tiyData.tParam.employeeTerminal.expireTime = Date.UTC(endDate.getFullYear(),endDate.getMonth(),endDate.getDate(),endDate.getHours());
        }
      },
      chooseExpireTime(date){
        let startDate = new Date(date[0]);
        let endDate = new Date(date[1]);
        tiyData.tParam.employeeTerminal.startEndTime = date;
        tiyData.tParam.employeeTerminal.effectiveTime = Date.UTC(startDate.getFullYear(),startDate.getMonth(),startDate.getDate(),startDate.getHours());
        tiyData.tParam.employeeTerminal.expireTime = Date.UTC(endDate.getFullYear(),endDate.getMonth(),endDate.getDate(),endDate.getHours());
      },
      showDecrypted(){
        tiyData.tStatus.decryptedModal.isShow = true;
        tiyData.tParam.decryptedComputeInfo.computeInfo = "";
        tiyData.tParam.decryptedComputeInfo.decrypted = "";
      },
      chooseEmployee(value){
        if (value != null){
          tiyData.tParam.employeeTerminal.employeeId = value.id;
        }
      },
      chooseTerminal(value){
        if (value != null){
          tiyData.tParam.employeeTerminal.terminalId = value.id;
        }
      }
    },
    mounted(){
      init(this,tiyData);
      // webList(this,tiyData);
    }
  }
</script>

<!--css样式-->
<style lang="less" scoped>
  @import  (once,optional)  "../css/base";
  .operation_item {
    text-align: left;
    margin-right: 20px;
  }
  .disSelect {
    background-color: #dbdbdb;
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
  }
  .itemChecked{
    background-color:#FDBDBD
  }
  .form_step {
    width:80%;
  }
  .postageRules_step {
    width:105px;
  }
  .postageRules_step_price {
    width:80px;
  }
  .postageRules_label {
    width:20%;
  }

  .country_div{
    border: solid #f1f1f1 1px;
    height: 3rem;
    margin: 8px;
    padding: 8px;
    display: -webkit-flex; /* Safari */
    display: flex;
    cursor: pointer;
    align-items:center;
    font-size: 0.9em;

    img{
      width: 2rem;
      margin-right: 1rem
    }
  }

  .countrySelected{
    background-color:#EDE7F6
  }
  .modal_base_div {
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    border: dotted thin #d1d1d1
  }

  .modal_base_div_title {
    text-align: left;
    margin-bottom: 10px
  }
  .ivu-form-item-content {
    margin-left: 80px !important
  }
  .key{
   .tiy_key;
    text-align: right;
  }

</style>
